<template>
      <div class="thumb-example">
    <swiper class="swiper" :options="swiperOption">
      <swiper-slide  v-for="(item,index) in imgArr" :key="index" :style="item.img" style="height:500px;width:100%"></swiper-slide>
       <div class="swiper-pagination" slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
  </div>
</template>
<script>
export default {
    data(){
        return{
                   swiperOption: {
        pagination: {
          el: ".swiper-pagination",
          type: "fraction"
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      },
      imgArr: [
        {
          img: {
            backgroundImage:
              "url(" + require("../../assets/images/example/2.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          }
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../../assets/images/example/1.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          }
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../../assets/images/example/3.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          }
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../../assets/images/example/4.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          }
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../../assets/images/example/5.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          }
        }
  
     
      ]
        }
    }
}
</script>
<style scoped>
.thumb-example {
  width: 100%;
  height: 100%;
  margin-top: 25px;
  margin-bottom: 20px;
}
/deep/.swiper-pagination {
  color: greenyellow;
    display: flex;
    justify-content: flex-end;
   padding-right: 20px;
}
.swiper-slide {
  background-size: cover;
  background-position: center;
}
.swiper-slide .slide-1 {
  background-image: url("../../assets/images/example/1.jpg");
}
.swiper-slide .slide-2 {
  background-image: url("../../assets/images/example/2.jpg");
}
.swiper-slide .slide-3 {
  background-image: url("../../assets/images/example/4.jpg");
}
.swiper-slide .slide-4 {
  background-image: url("../../assets/images/example/5.jpg");
}
.swiper-slide .slide-5 {
  background-image: url("../../assets/images/example/6.jpg");
}

.swiper .gallery-top {
  height: 80%;
  width: 100%;
}
.swiper .gallery-thumbs {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}
.swiper .gallery-thumbs .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}
.swiper .gallery-thumbs .swiper-slide-active {
  opacity: 1;
}

</style>

